<template>
	<!-- 欢迎语 -->
	<view class="home">
		<view class="head">
			<navigator class="goBack" open-type="navigateBack">
				<u-icon name="arrow-left" color="#444" size="28" style="margin-right: 10rpx;"></u-icon>
				新建欢迎语
			</navigator>
			<navigator url="../addWelcomeSpeech/addWelcomeSpeech" class="goNew" >新建</navigator>
		</view>
		<scroll-view scroll-y="true" style="height: 1110rpx;">
			<view class="Item">
				<view class="title" style="margin-left: 20rpx;">
					<titleRow style="margin-left: 20rpx;" :titleName="titleName1"></titleRow>
					
				</view>
				<view class="content">
					<view class="img" v-if="!myWelcomeSpeech.length">
						<image  src="../../static/img/didNotCreate.png" mode="aspectFill"></image>
					</view>
					<view class="arrItem" v-if="myWelcomeSpeech.length" v-for="(item,index) in myWelcomeSpeech" :key="index">
						<view class="top">
							<view class="desc">
								<text>我创建于{{item.add_time}}</text>
								<text>创建者: {{item.user_id}}</text>
							</view>
							<view class="switch" @click="changeItemStatus(item,index)">
								<u-switch v-model="item.checked" active-color="#5BBB57" inactive-color="#BBBBBB"></u-switch>
							</view>
						</view>
						<div class="text">
							<view class="content">
								<textarea :disabled="item.editStuts == false ? true : false" style="min-height: 40px;" :value="item.content" auto-height :maxlength="-1" />
							</view>
							<view class="iconArr">
								<view class="iconItem" @click="deleteShow=true,deleteId=item.id">
									<image src="../../static/img/delete.png" mode=""></image>
									<text>删除</text>
								</view>
								<view class="iconItem" @click="editBtnCilck(item)">
									<image src="../../static/img/edit.png" mode=""></image>
									<text>编辑</text>
								</view>
							</view>
							
						</div>
					</view>
				</view>
			</view>
			<view style="background-color: #f9f9f9;height: 20rpx;">
				
			</view>
			<view class="Item">
				<view class="title" style="margin-left: 20rpx;display: flex;align-items: center;">
					<titleRow style="margin-left: 20rpx;margin-right: 10rpx;" :titleName="titleName2"></titleRow>
					({{historyArrTotal}})
				</view>
				<view class="content">
					<view class="img" v-if="!historyWelcomeSpeech.length">
						<image  src="../../static/img/didNotCreate.png" mode="aspectFill"></image>
					</view>
					<view class="arrItem" v-if="historyWelcomeSpeech.length" v-for="(item,index) in historyWelcomeSpeech" :key="index">
						<view class="top">
							<view class="desc">
								<text>我创建于{{item.add_time}}</text>
								<text>创建者: {{item.user_id}}</text>
							</view>
							<view class="switch" @click="changeItemStatus(item,index)">
								<u-switch v-model="item.checked"  active-color="#5BBB57" inactive-color="#BBBBBB"></u-switch>
							</view>
						</view>
						<div class="text">
							<view class="content">
								<textarea :disabled="item.editStuts == false ? true : false" style="min-height: 40px;" :value="item.content" auto-height :maxlength="-1" />
							</view>
							<view class="iconArr">
								<view class="iconItem" @click="deleteShow=true,deleteId=item.id">
									<image src="../../static/img/delete.png" mode=""></image>
									<text>删除</text>
								</view>
								<view class="iconItem" @click="editBtnCilck(item)">
									<image src="../../static/img/edit.png" mode=""></image>
									<text >{{item.editStuts==false ? '编辑':'完成'}}</text>
								</view>
							</view>
							
						</div>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup v-model="deleteShow" mode="center">
				<view class="tips">
					<view class="title">
						提示
					</view>
					<text>删除后不可恢复，确定删除欢迎语？</text>
					<view class="btnArr">
						<view class="btn" @click="deleteShow=false,deleteId=''">取消</view>
						<view class="btn" @click="deleteItem">删除</view>
					</view>
				</view>
		</u-popup>
		<u-popup v-model="editShow" mode="center">
				<view class="tips">
					<view class="title">
						请修改欢迎语
					</view>
					<textarea  style="min-height: 40px;margin: 30rpx 0;" @input="inputBlur" :value="editObj.content" auto-height :maxlength="-1" />
					<view class="btnArr">
						<view class="btn" @click="editShow=false">取消</view>
						<view class="btn" @click="editItem">确认</view>
					</view>
				</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import titleRow from '@/component/titleRow/titleRow.vue'
	export default {
		data() {
			return {
				titleName1:'我的欢迎语',
				titleName2:'历史欢迎语',
				myWelcomeSpeech:[],
				historyWelcomeSpeech:[],
				deleteShow:false,
				deleteId:'',
				oldEditArr:[],
				editShow:false,
				editObj:{
					content:'',
					id:'',
				},
				historyArrTotal:'',
			};
		},
		components:{
			titleRow
		},
		onLoad() {
			// this.getWelcomeSpeech(2)
			// this.getWelcomeSpeech(1)
		},
		onShow() {
			this.getWelcomeSpeech(2)
			this.getWelcomeSpeech(1)
		},
		methods:{
			inputBlur(val){
				this.editObj.content = val.detail.value
			},
			async editItem(){
				await this.myhttp({
					url:'api/Xluser/editCustomerWelcome',
					data:{
						content:this.editObj.content,
						id:this.editObj.id
					}
				}).then(res=>{
					if(res.data.code==1){
							this.$refs.uToast.show({
									title: '修改成功',
									type: 'success',
							})
							this.getWelcomeSpeech(2)
							this.getWelcomeSpeech(1)
						}else{
							this.$refs.uToast.show({
									title: '修改失败',
									type: 'error',
							})
						}
				}).finally(()=>this.editShow=false)
			},
			async editBtnCilck(_item){
				Object.assign(this.editObj,_item)
				this.editShow = true
			},
			async deleteItem(){
				let res = await this.myhttp({
					url:'api/Xluser/delCustomerWelcome',
					data:{
						id:this.deleteId,
					}
				}).then(res=>{
					if(res.data.code==1){
						this.$refs.uToast.show({
								title: '删除成功',
								type: 'success',
						})
						this.getWelcomeSpeech(2)
						this.getWelcomeSpeech(1)
					}else{
						this.$refs.uToast.show({
								title: '删除失败',
								type: 'error',
						})
					}
				}).finally(()=>this.deleteShow=false)
			},
			async changeItemStatus(_item,_index){
				console.log(111);
				let res = await this.myhttp({
					url:'api/Xluser/editCustomerIsDel',
					data:{
						id:_item.id,
						is_del:_item.is_del==2 ? 1 : 2,
					}
				}).then(res=>{
					if(res.data.code==1){
						this.$refs.uToast.show({
								title: '修改状态成功',
								type: 'success',
						})
						this.getWelcomeSpeech(2)
						this.getWelcomeSpeech(1)
					}else{
						this.$refs.uToast.show({
								title: '修改状态失败',
								type: 'error',
						})
					}
				})
			},
			// 1.历史  2.我的
			async getWelcomeSpeech(_type){
				let res = await this.myhttp({
					url:'api/Xluser/getCustomerWelcomeList',
					method:'GET',
					data:{
						is_del : _type
					}
				}).then(res=>{
					console.log(res.data);
					if(res.data.code == 1 && _type == 2){
						this.myWelcomeSpeech = res.data.data.data
						this.myWelcomeSpeech.forEach(item=>{
							item.is_del == 2 ? item.checked = true : item.checked = false
							item.editStuts = false
						})
					}else if(res.data.code == 1 && _type == 1){
						this.historyWelcomeSpeech = res.data.data.data
						this.historyArrTotal = res.data.data.total
						this.historyWelcomeSpeech.forEach(item=>{
							item.is_del == 2 ? item.checked = true : item.checked = false
							item.editStuts = false
						})
					}else{
						this.$refs.uToast.show({
								title: '获取数据失败',
								type: 'error',
						})
					}
				})
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.tips{
		width: 588rpx;
		min-height: 264rpx;
		height: auto;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		.title{
			color: #111;
			font-size: 28rpx;
			font-weight: 600;
		}
		text{
			color: #444444;
			font-size: 24rpx;
			flex: 1;
			margin-top: 34rpx;
		}
		.btnArr{
			width: 100%;
			display: flex;
			justify-content: flex-end;
			.btn{
				width: 118rpx;
				height: 58rpx;
				background: #FFFFFF;
				border: 1px solid #D9D9D9;
				border-radius: 2rpx;
				color:#595959;
				display: grid;
				place-items: center;
				&:nth-child(2){
					color: #fff;
					background-color: #438EF7;
					margin-left: 20rpx;
				}
			}
			
		}
	}
	
	.home {
		 background-color: #f9f9f9;
  		.head {
			  display: flex;
			  justify-content: space-between;
			  height: 90rpx;
			  align-items: center;
			  padding: 0 30rpx;
			  background-color: #fff;
    		.goBack {
				color: #444444;
    		}

    		.goNew {
				background: #0991FF;
				color: #fff;
				height: 60rpx;
				width: 120rpx;
				display: grid;
				place-items: center;
				border-radius: 4rpx;
    		}
  		}
		
		
  		.Item {
			// height: 580rpx;
			width: 100%;
			background-color: #fff;
    		.title {
				
				titlerow {
				}
    		}

    		.content {
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.img{
					height: 520rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 352rpx;
						height: 219rpx;
					}
				}
			
				.arrItem{
					width: 100%;
					// height: 324rpx;
					// min-height: 324rpx;
					padding: 10rpx 5rpx;
					border-top: 10rpx solid #F9F9F8;
					&:nth-child(1){
						border-top: 0;
					}
					.top{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 138rpx;
						padding: 0 30rpx;
						border-bottom: 1px solid #F9F9F8;
						.desc{
							display: flex;
							flex-direction: column;
							height: 100%;
							justify-content: space-evenly;
							font-size: 24rpx;
							color: #888888;
						}
						.switch{
						}
					}
					.text{
						padding: 20rpx;
						position: relative;
						min-height: 186rpx;
						height: auto;
						display: flex;
						flex-direction: column;
						.content{
							flex: 1;
						}
						.iconArr{
							display: flex;
							justify-content: flex-end;
							color: #888888;
							font-size: 24rpx;
							.iconItem{
								display: flex;
								margin-left: 50rpx;
								&:nth-child(1) {
									margin-left: 0;
								}
								image{
									width: 30rpx;
									height: 30rpx;
								}
							}
						}
					}
					
				}
				
				
    		}
  		}
	}
</style>
